<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ZoomMarker_Demo</title> <link rel="stylesheet" href="css/zoom-marker.css"> <link rel="stylesheet" href="css/easy-loading.css"> <style> .zoom-marker-navigator{ width: 100%; margin: 10px; text-align: center; } </style></head><body><div class="zoom-marker-navigator"> <button id="zoom-marker-btn-switch">switch picture</button> <button id="zoom-marker-btn-clean">clean marker</button> <button id="zoom-marker-btn-loading">show loader</button> <button id="zoom-marker-btn-enable-drag">disable drag</button></div><div id="zoom-marker-div" class="zoom-marker-div"><!-- <img class="zoom-marker-img" id="zoom-marker-img" alt="zoom-marker-img" name="zoom-marker-img" draggable="false"/>--> <img class="zoom-marker-img" id="zoom-marker-img-alt" alt="zoom-marker-img-alt" name="zoom-marker-img-alt" draggable="false"/></div></body><script src="js/jquery-3.3.1.min.js"></script><script src="js/jquery.mousewheel.min.js"></script><script src="js/hammer.min.js"></script><script src="js/zoom-marker.js"></script><script src="js/easy-loading.js"></script><script> /******************* init navigator button, no need for users' initialization *********************/ var picTag = 0; var tagNumber = 1; $('#zoom-marker-btn-switch').click(function(e){ $('#zoom-marker-img').zoomMarker_CleanMarker(); if(picTag===0){ $('#zoom-marker-img').zoomMarker_LoadImage("img/rail.jpg"); } else if(picTag===1){ $('#zoom-marker-img').zoomMarker_LoadImage("img/mountain.jpg"); } picTag = 1-picTag; }); $('#zoom-marker-btn-clean').click(function(e){ $('#zoom-marker-img').zoomMarker_CleanMarker(); $('#zoom-marker-img').zoomMarker_CanvasClean(); }); // this array stores the styles for EASY-LOADING var styleList = [ "BALL_PULSE", "BALL_CLIP_ROTATE", "BALL_CLIP_ROTATE_PULSE", "SQURE_SPIN", "BALL_CLIP_ROTATE_MULTIPLE", "BALL_PULSE_RISE", "BALL_ROTATE", "CUBE_TRANSITION", "BALL_ZIP_ZAG", "BALL_ZIP_ZAG_DEFLECT", "BALL_TRIANGLE_PATH", "BALL_SCALE", "LINE_SCALE", "LINE_SCALE_PARTY", "BALL_SCALE_MULTIPLE", "BALL_PULSE_SYNC", "BALL_BEAT", "LINE_SCALE_PULSE_OUT", "LINE_SCALE_PULSE_OUT_RAPID", "BALL_SCALE_RIPPLE", "BALL_SCALE_RIPPLE_MULTIPLE", "BALL_SPIN_FADE_LOADER", "LINK_SPIN_FADE_LOADER", "TRIANGLE_SKEW_SPIN", "PACMAN", "SEMI_CIRCLE_SPIN" ]; var stylePosition = 0; $('#zoom-marker-btn-loading').click(function(e){ EasyLoading.show({ text: $("<span>" styleList[stylePosition] "</span>"), button:$("<span>dismiss</span>"), type: EasyLoading.TYPE[styleList[stylePosition]], //timeout: EasyLoading.TIMEOUT.FAST, callback: function(event, data){ switch(event){ case 'on_btn_click' : console.log(data); break; case 'on_loaded' : console.log("callback with options:" JSON.stringify(data)); break; } } }); if( stylePosition>=styleList.length) stylePosition = 0; }); var isEnableDrag = true; $('#zoom-marker-btn-enable-drag').click(function(e) { isEnableDrag = !isEnableDrag; $('#zoom-marker-img').zoomMarker_EnableDrag(isEnableDrag); if(isEnableDrag) { $('#zoom-marker-btn-enable-drag').text('disable drag'); } else { $('#zoom-marker-btn-enable-drag').text('enable drag'); } }); // init item var initImg = function(item) { // handle "TAP" event and add marker to image item.on("zoom_marker_mouse_click", function(event, position){position.pageX = position.pageX.toFixed(4);position.pageY = position.pageY.toFixed(4);position.x = position.x.toFixed(4);position.y = position.y.toFixed(4); console.log("Mouse click on: " JSON.stringify(position)); item.zoomMarker_AddMarker({ src:"img/marker.svg", x:position.x, y:position.y, size:30, dialog:{ value: "<h4>content for dialog_" tagNumber "</h4>", offsetX: 20, style: { "border-color": "#86df5f" } }, hint:{value:tagNumber, style:{color:"#ffffff", left:"10px"}} }); // 画线 const context = item.zoomMarker_Canvas(); if(context !== null) { context.strokeStyle = 'red'; context.moveTo(position.x, position.y); context.lineTo(100,100); context.stroke(); } if( tagNumber>=10) tagNumber=1; }); // listen to marker click event, print to console and delete the marker item.on("zoom_marker_click", function(event, marker){ console.log(JSON.stringify(marker)); $('#zoom-marker-img').zoomMarker_RemoveMarker(marker.id); }); // message for the beginning of image loading process item.on("zoom_marker_img_load", function(event, src){ console.log("loading started for image : " src); EasyLoading.show({ text: $("<span>loading image</span>"), button:$("<span>dismiss</span>"), type: EasyLoading.TYPE.PACMAN }); }); // message for image loaded item.on("zoom_marker_img_loaded", function(event, size){ console.log("image has been loaded with size: " JSON.stringify(size)); // we have to set a timer in order to watching the loader in local environment, cause the loading speed is too fast setTimeout(function(){ EasyLoading.hide(); }, 3000); }); } initImg($('#zoom-marker-img')); initImg($('#zoom-marker-img-alt')); /******************** INIT ZoomMarker here *****************************/ $(document).ready(function () { $('#zoom-marker-img-alt').zoomMarker({ src: "img/rail.jpg", rate: 0.2, width: 500, max: 7086, markers:[ //{src:"img/marker.svg", x:300, y:300} ] }); //$('#zoom-marker-img').zoomMarker({ // //src: "img/mountain.jpg",//src: "img/W-S2-07A.png", // rate: 0.2, // width: 1000, // max: 7086, // markers:[ // {src:"img/marker.svg", x:200, y:200, draggable:false} // ], // enable_canvas: true //}); }) /******************** INIT ZoomMarker here *****************************/</script></html>
评论